<template>
  <div class="warningEvent" :style="showHead ? '' : 'width:100%'" @click.stop>
    <div v-if="showHead" class="title">
      <div class="name"><div class="content">预警事件</div></div>
      <el-tooltip effect="dark" content="收起" placement="top">
        <img
          :src="VITE_BASE_PUBLICPATH + '/img/cockpit/rightClose.png'"
          alt=""
          class="closeArrow"
          @click.stop="closeLeft"
        />
      </el-tooltip>
      <el-tooltip effect="dark" content="历史记录" placement="top">
        <img
          :src="VITE_BASE_PUBLICPATH + '/img/cockpit/history.png'"
          alt=""
          @click.stop="$emit('waringClick')"
        />
      </el-tooltip>
    </div>
    <div class="card">
      <div class="controlBtn">
        <div
          v-for="item in btnList"
          :key="item.dictValue"
          :class="item.dictValue === isClick ? 'btnAloneClick' : 'btnAlone'"
          @click="clickHandle(item)"
        >{{ item.dictLabel }}</div>
      </div>
      <div class="total">
        <div class="totalNum">{{ alarmData.totalAlarmsNum }}</div>
        <div class="totalTitle">报警总数量</div>
      </div>
      <div class="events" :class="{ isSingle: !showHead, isSmall: isSmall }">
        <!-- <div class="events-box"> -->
        <div class="eventItem">
          <div class="eventName">
            <div class="point"></div>
            侵入管制空域报警数量
          </div>
          <div class="Number">{{ alarmData.intrusionNum }}</div>
        </div>
        <div class="eventItem">
          <div class="eventName">
            <div class="point"></div>
            偏离航线空域报警数量
          </div>
          <div class="Number">{{ alarmData.invasionNum }}</div>
        </div>
        <!-- </div> -->
        <!-- <div class="events-box"> -->
        <div class="eventItem">
          <div class="eventName">
            <div class="point"></div>
            冲突报警数量
          </div>
          <div class="Number">{{ alarmData.collisionNum }}</div>
        </div>
        <div class="eventItem">
          <div class="eventName">
            <div class="point"></div>
            一键报警数量
          </div>
          <div class="Number">{{ alarmData.OneTouchNum }}</div>
        </div>
        <!-- </div> -->
        <!-- <div class="events-box"> -->
        <div class="eventItem">
          <div class="eventName">
            <div class="point"></div>
            黑飞报警数量
          </div>
          <div class="Number">{{ alarmData.blankFlyNum }}</div>
        </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WarningEvents",
};
</script>

<script setup>
import {computed, defineProps, onMounted, reactive, ref} from "vue";
import useCockpitStore from "@/store/modules/cockpit";
import { getDictionary } from "@/api/system/dict/type";
import { getTotalAlarm } from "@/api/cockpit/alarm"
const props = defineProps({
  showHead: {
    type: Boolean,
    default: true,
  },
  isSmall: {
    type: Boolean,
    default: false,
  },
});
const VITE_BASE_PUBLICPATH = import.meta.env.VITE_BASE_PUBLICPATH;
const cockpitStore = useCockpitStore();
// let alarmData = computed(() => {
//   return cockpitStore.totalAlarm || {};
// });

const alarmData = cockpitStore.totalAlarm || ref({});
const emits = defineEmits(["closeLeft"]);

const closeLeft = () => {
  emits("closeLeft");
};

const isClick = ref("total");
const btnList = ref([]);

const clickHandle = (val) => {
  isClick.value = val.dictValue;
  getData(val.dictValue)
}

const getData = (value) => {
  getTotalAlarm({ type: value }).then(data => {
    if (data.code === 200) {
      alarmData.value = data.data;
    }
  })
}

const getListType = () => {
  getDictionary('aircraft_type').then((data) => {
    if (data.code === 200) {
      btnList.value = data.data;
      btnList.value.unshift({
        dictLabel: "全部",
        dictValue: "total"
      })
      getData("total");
    }
  })
}

onMounted(() => {
  getListType();
})

</script>

<style scoped lang="scss">
.warningEvent {
  margin-right: 15px;
  width: 528px;
  z-index: 20;
  .title {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    

    .name {
      padding-left: 45px;
      width: 486px;
      height: 48px;
      background: url("/img/cockpit/titleBack.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: bottom;

      .content {
        text-align: left;
        font-size: 24px;
        font-family: "YouSheBiaoTiHei";
        font-weight: 400;
        color: rgba(255, 255, 255, 0);
        // text-shadow: 0px 3px 2px #081b1e;

        background: linear-gradient(
          0deg,
          rgba(73, 136, 181, 0.96) 0%,
          rgba(255, 255, 255, 0.96) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .closeArrow {
      position: absolute;
      left: 0;
      width: 50px;
      height: 50px;
      top: -9px;
      right: 10px;
      cursor: pointer;
    }
  }

  .card {
    position: relative;
    width: 100%;
    height: 176px;
    // opacity: 0.25;
    background: url("/img/cockpit/cardBack.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .controlBtn{
      position: absolute;
      width: 100px;
      height: 170px;
      padding-top: 1%;
      left: 3%;

      .btnAlone{
        width: 68px;
        height: 26px;
        border: 1px solid #023B41;
        background: rgba(0, 230, 255, 0.1);
        border-radius: 4px;
        margin: 11% 16%;
        color: #FFFFFF;
        text-align: center;
        font-size: 14px;
        opacity: 0.8;
        // font-weight: bold;
        padding: 2% 0;
        cursor: pointer;
      }

      .btnAloneClick{
        width: 68px;
        height: 26px;
        background: rgba(0, 230, 255, 0.1);
        border-radius: 4px;
        margin: 11% 16%;
        text-align: center;
        font-size: 14px;
        opacity: 0.8;
        // font-weight: bold;
        padding: 2% 0;
        cursor: pointer;
        border: 1px #00E0F8 solid;
        color: #00ECFB;
      }
    }


    .total {
      position: absolute;
      bottom: 0;
      left: 20%;
      width: 170px;
      height: 170px;
      background: url("/img/cockpit/warningEvent.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;

      .totalNum {
        position: absolute;
        //top: 130px;
        //left: 60%;
        top: 26%;
        left: 55%;
        // width: 85px;
        transform: translateX(-50%);
        height: 40px;
        font-size: 40px;
        font-family: DigifaceWide;
        font-weight: 400;
        color: #ffffff;
        // text-shadow: 1px 2px 4px #0d464e;

        background: linear-gradient(0deg, #ffffff 0%, #00cadc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .totalTitle {
        position: absolute;
        bottom: 20%;
        left: 53%;
        width: 81px;
        height: 14px;
        font-size: 14px;
        transform: translateX(-50%);
        text-align-last: justify;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .events {
      //border: 1px red solid;
      position: absolute;
      top: 27px;
      right: 0;
      width: 40%;
      height: 110px;

      .events-box {
        //border: 1px blue solid;
        width: 183px;
        float: left;
      }

      .eventItem {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        margin-bottom: 8px;

        .eventName {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 160px;
          height: 13px;
          line-height: 13px;
          letter-spacing: 2px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #d7f1ff;

          .point {
            margin-right: 5px;
            width: 4px;
            height: 4px;
            background: #046372;
            border-radius: 2px;
          }
        }

        .Number {
          margin-left: 30px;
          height: 16px;
          line-height: 16px;
          font-size: 16px;
          font-family: DigifaceWide;
          font-weight: 400;
          color: #ffffff;
          // text-shadow: 1px 2px 2px rgba(27, 59, 64, 0.8);

          background: linear-gradient(0deg, #ffffff 0%, #00cadc 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .events.isSingle {
      top: 25px;
      right: 10%;
      .eventName {
        width: 160px;
        letter-spacing: 2px;
      }
    }

    .events.isSmall {
      top: 40px;
      right: 0;
      .eventName {
        width: 100px;
      }
    }
  }
}
</style>
